<template>
  <div class="query-form">
    <form-module
      :formModuletems="queryFormItems"
      :formConfig="formConfig"
      v-model="queryFormParam"
    >
      <template #control-btn>
        <el-col :span="4">
          <el-button icon="CircleClose" @click="resetQueryForm" plain
            >重置</el-button
          >
          <el-button icon="ZoomIn" type="primary" @click="search" plain
            >搜索</el-button
          >
        </el-col>
      </template>
    </form-module>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from "vue";
import FormModule from "@/components/form-module";
import { IFormModuleType } from "@/components/form-module/type/type";
import { IFormConfigType } from "@/components/form-module/type/type";

export default defineComponent({
  emits: ["reset", "search"],
  components: {
    FormModule
  },
  props: {
    queryFormItems: {
      type: Array as PropType<IFormModuleType[]>,
      default: () => []
    },
    formConfig: {
      type: Object as PropType<IFormConfigType>,
      default: () => ({})
    }
  },
  setup(props, { emit }) {
    const originQueryParam = {};
    for (const item of props.queryFormItems) {
      (originQueryParam as any)[item.param] = "";
    }
    const queryFormParam = ref(originQueryParam);
    // 重置表单
    const resetQueryForm = () => {
      queryFormParam.value = originQueryParam;
      emit("reset");
    };
    const search = () => {
      emit("search", queryFormParam.value);
    };
    return { queryFormParam, resetQueryForm, search };
  }
});
</script>

<style scoped></style>
